<template>
  <!-- Vue3 新特性：允许多个根组件 -->
  <h1>{{ count }}</h1>
  <button @click="btn(1)">点击加1</button>
  <button @click="btn(10)">点击加10</button>
</template>

<script>

  const useCount = () => {
    // 优点：代码都放在一个地方，封装复用更方便
    const count = ref(0);
    const btn = (number) => {
      count.value += number;
    };
    return { count, btn };
  };

  // Vue3 组合 API 写法(初体验)
  import { ref } from "vue";
  export default {
    name: "App",
    setup() {
      return { ...useCount() }
    },
  };
</script>